<template>
  <div class="open-body">
    <div class="title">
      资源回收系统 快捷访问
    </div>
    <el-button type="info" plain @click="drawer = true">设置访问码</el-button>
    <el-button @click="getQrCode">扫一扫</el-button>
    <el-input v-model="form.goodsId" placeholder="请输入完整的商品编码" clearable style="width: 90%;margin-top: 20px" />

    <div style="margin-top: 20px">
      <div id="reader" width="600px"></div>
    </div>
    <div style="height: 20px"></div>
    <el-button type="primary" plain @click="getGoodsDetail">查询</el-button>

    <div style="line-height: 50px;text-align: left;" v-if="detail">
      <div style="font-weight: 600; padding-left: 20px">选择列表</div>
      <div
        v-for="(d, k) in detail"
        @click="selIndexChange(k)"
        style="border-bottom: 1px solid #F2F6FC; padding-left: 20px">{{d.goodsId}}</div>
    </div>

    <div class="detail-info" v-if="detail">
      <div class="info-row">编码: {{detail[selIndex].goodsId}}</div>
      <div class="info-row">型号: {{detail[selIndex].goodsName}}</div>
      <div class="info-row">规格: {{detail[selIndex].specs}}</div>
      <div class="info-row">IMEI: {{detail[selIndex].goodsSn}}</div>
      <div class="info-row">验机内容: {{detail[selIndex].testValues}}</div>
      <div class="info-row" style="color: red">
        <div v-for="p in detail[selIndex].sellPrice">
          {{p.label}} : {{p.price}} 元
        </div>
      </div>
      <div class="info-row">备注: {{detail[selIndex].remark}}</div>
    </div>

    <el-drawer
      title="设置访问码"
      :visible.sync="drawer"
      direction="ltr"
      class="drawer-cls"
      size="65%"
    >
      <el-input v-model="form.password" show-password style="width: 80%" />
    </el-drawer>

    <div style="height: 50px"></div>
  </div>
</template>

<script>
import {goodsDetail} from "@/api/open-api/goods-api"
import {Html5QrcodeScanner, Html5Qrcode} from "html5-qrcode"
export default {
  name: "open-goods",
  data() {
    return{
      drawer: false,
      form: {
        password: "",
        goodsId: ""
      },
      selIndex: 0,
      detail: null,
    }
  },
  methods: {
    selIndexChange(k) {
      this.selIndex = k;
    },
    /* 获取条码类容*/
    getQrCode() {

      let scanner = new Html5QrcodeScanner(
        "reader",
        { fps: 10, qrbox: {width: 250, height: 250} },
        /* verbose= */ false);
      scanner.render((t, r)=> {
        console.log("---回调函数:")
        this.form.goodsId = t;
      }, (e) => {
        console.log("错误：", e);
      })
    },
    getGoodsDetail() {
      this.detail = null;
      goodsDetail(this.form).then(res => {
        this.detail = res.data;
        console.log(this.detail);
      })
    }
  }
}
</script>

<style scoped>
  .open-body {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .title {
    font-size: 30px;
    margin: 20px;
  }
  .drawer-cls {
    width: 100%;
  }
  .detail-info {
    margin-top: 30px;
    line-height: 40px;
    font-size: 16px;
    justify-content: left;
    text-align: left;
    margin-left: 20px;
  }
</style>
